<!--<script setup>
import { ref, computed } from "vue";

const activeIndex = ref("1");
const isLoggedIn = ref(false);
const productList = ref([
  {
    id: "1",
    type: "徽章",
    name: "IT社区文创 ：「代码新秀闪耀」 荣誉徽章",
    price: 29,
    stock: 30,
    img: "/images/product01.png",
  },
  {
    id: "2",
    type: "帆布包",
    name: "【it社区文创】「极简主义」帆布包",
    price: 79,
    stock: 60,
    img: "/images/product02.png",
  },
  {
    id: "3",
    type: "T恤",
    name: "蓝字魔法，解锁IT新风尚——百搭T恤衫",
    price: 12,
    stock: 100,
    img: "/images/product03.png",
  },
  {
    id: "4",
    type: "U盘",
    name: "IT达人必备：128GB紫色技术社区U盘",
    price: 39,
    stock: 80,
    img: "/images/product04.png",
  },
  {
    id: "5",
    type: "笔记本",
    name: "高端皮质IT笔记本，简约设计尽显专业气质",
    price: 29,
    stock: 30,
    img: "/images/product05.png",
  },
  {
    id: "6",
    type: "鼠标垫",
    name: "文创字母鼠标垫「IT技术社区专属」",
    price: 79,
    stock: 60,
    img: "/images/product06.png",
  },
  //{ id:"7",type: '马克杯', name: '白色陶瓷杯，简约IT标志，时尚办公新选择', price: 12, stock: 100, img: '/images/product07.png' },
  //{ id:"8",type: '贴纸', name: '科技与创意碰撞——IT社区蓝色徽章文创', price: 39, stock: 80, img: '/images/product08.png' },
]);
const cartItems = ref([]);

const totalPrice = computed(() => {
  return cartItems.value.reduce((total, item) => {
    return total + item.price * item.number;
  }, 0);
});

const addToCart = (product) => {
  const cartItem = cartItems.value.find((item) => item.id === product.id);
  if (cartItem) {
    cartItem.number++;
  } else {
    cartItems.value.push({
      ...product,
      number: 1,
    });
  }
};

const handleChange = (item) => {
  if (item.number <= 0) {
    removeFromCart(item);
  }
};

const removeFromCart = (item) => {
  const index = cartItems.value.indexOf(item);
  if (index > -1) {
    cartItems.value.splice(index, 1);
  }
};

const clearCart = () => {
  cartItems.value = [];
};

const submitOrder = () => {
};
</script>-->

<!-- <template> -->
  <!--<el-container>-->
    <!-- <el-header>
      <el-row>
        <el-col
          :span="4"
          style="display: flex; flex-direction: row; align-items: center"
        >
          <img src="/images/logo.png" style="height: 60px" />
          <h2 style="padding-left: 4px">技术社区</h2>
        </el-col>
        <el-col :span="8">
          <el-menu
            :default-active="activeIndex"
            mode="horizontal"
            style="border-bottom: none !important"
          >
            <el-menu-item index="1">首页</el-menu-item>
            <el-menu-item index="2">文章</el-menu-item>
            <el-menu-item index="3">课程</el-menu-item>
            <el-menu-item index="4">商城</el-menu-item>
          </el-menu>
        </el-col>
        <el-col
          :span="8"
          style="height: 60px; line-height: 60px"
          class="hidden-only-sm"
        >
          <el-input placeholder="请输入关键字" />
        </el-col>
        <el-col
          :span="4"
          style="text-align: right; height: 60px; line-height: 60px"
          class="hidden-only-sm"
        >
          <div v-if="!isLoggedIn">
            <el-link type="primary" href="login.html">登录</el-link>
            <el-link type="primary" style="padding-left: 4px" href="reg.html"
              >注册</el-link
            >
          </div>
          <div v-else>
            <img
              src="/images/avatar.png"
              style="width: 30px; height: 30px; border-radius: 50%"
            />
            <el-link type="primary" style="padding-left: 4px" href="person.html"
              >个人中心</el-link
            >
          </div>
        </el-col>
      </el-row>
    </el-header> -->

    <!-- <el-container style="width: 80%; margin: 0 auto">
      <el-main>
        <el-row>
          <el-col :xs="12" :sm="8" v-for="(product, i) in productList" :key="i">
            <el-card shadow="hover" style="margin: 2%">
              <div style="display: flex; justify-content: center">
                <img :src="product.img" style="width: 90%; height: 50%" />
              </div>
              <p style="width: 90%">{{ product.name }}</p>
              <p style="display: flex; gap: 20%">
                <span>价格：￥{{ product.price }}</span>
                <span>库存：{{ product.stock }}件</span>
              </p>
              <el-button @click="addToCart(product)">加入购物车</el-button>
            </el-card>
          </el-col>
        </el-row>
      </el-main>

      <el-aside>
        <el-card style="margin-top: 10%">
          <h2><i class="fas fa-shopping-cart"></i> 购物车</h2>
          <div v-if="cartItems.length > 0">
            <div v-for="(item, i) in cartItems" :key="i">
              <div
                style="display: flex; flex-direction: row; align-items: center"
              >
                <img :src="item.img" style="width: 50px; height: 50px" />
                {{ item.name }}
              </div>
              <div>
                <span style="margin-right: 9%">单价：￥{{ item.price }}</span>
                <el-input-number
                  v-model="item.number"
                  :min="0"
                  :max="item.stock"
                  @change="handleChange(item)"
                ></el-input-number>
                <el-divider style="margin: 10px 0" />
              </div>
            </div>
            <div style="text-align: right">
              <p>总价：￥{{ totalPrice }}</p>
              <el-button type="primary" plain @click="clearCart"
                >清空购物车</el-button
              >
              <el-button type="primary" @click="submitOrder">结算</el-button>
            </div>
          </div>
          <div v-else>
            <el-empty description="暂无商品"></el-empty>
            <p>总价：￥{{ totalPrice }}</p>
            <el-button type="primary" @click="submitOrder">结算</el-button>
          </div>
        </el-card>
      </el-aside>
    </el-container> -->

    <!-- <el-footer>
      <el-row>
        <el-col
          :xs="24"
          :lg="8"
          style="display: flex; flex-direction: row; align-items: center"
        >
          <div>
            <img src="/images/logo.png" style="height: 100px" />
          </div>
          <div>
            <h2 style="padding-left: 4px">技术社区</h2>
            <p style="padding-left: 4px">致力构建一个专业的IT技术交流社区</p>
          </div>
        </el-col>
        <el-col
          :xs="24"
          :lg="10"
          style="
            display: flex;
            flex-direction: column;
            text-align: center;
            padding-top: 3%;
          "
        >
          <div
            style="
              display: flex;
              flex-direction: row;
              gap: 70px;
              padding-left: 15px;
            "
          >
            <el-link type="primary">首页</el-link>
            <el-link type="primary">咨询</el-link>
            <el-link type="primary">课程</el-link>
            <el-link type="primary">商城</el-link>
          </div>
          <div style="display: flex; flex-direction: row; gap: 43px">
            <el-link type="primary">关于我们</el-link>
            <el-link type="primary">使用手册</el-link>
            <el-link type="primary">隐私条款</el-link>
            <el-link type="primary">建议反馈</el-link>
          </div>
        </el-col>
        <el-col :xs="24" :lg="6">
          <div>
            <h2>联系我们</h2>
            <p>电话：123456789</p>
            <p>邮箱：software@develop.com</p>
          </div>
        </el-col>
        <el-col :xs="24" :lg="24" style="background-color: deepskyblue">
          <p style="text-align: center">软件开发工作室版权所有</p>
        </el-col>
      </el-row>
    </el-footer> -->
  <!--</el-container>-->
<!-- </template> -->

<!-- <style scoped>

.el-carousel__container img {
  width: 100%;
  height: 100%;
}

@media (max-width: 768px) {
  .el-container {
    width: 100% !important;
  }
}
</style> -->
<script setup>
import Cart from './components/Cart.vue';
import emitter from '@/utils/bus';
import { ref } from 'vue'

const productList = ref([
{
    id: "1",
    type: "徽章",
    name: "IT社区文创 ：「代码新秀闪耀」 荣誉徽章",
    price: 29,
    stock: 30,
    img: "/images/product01.png",
  },
  {
    id: "2",
    type: "帆布包",
    name: "【it社区文创】「极简主义」帆布包",
    price: 79,
    stock: 60,
    img: "/images/product02.png",
  },
  {
    id: "3",
    type: "T恤",
    name: "蓝字魔法，解锁IT新风尚——百搭T恤衫",
    price: 12,
    stock: 100,
    img: "/images/product03.png",
  },
  {
    id: "4",
    type: "U盘",
    name: "IT达人必备：128GB紫色技术社区U盘",
    price: 39,
    stock: 80,
    img: "/images/product04.png",
  },
  {
    id: "5",
    type: "笔记本",
    name: "高端皮质IT笔记本，简约设计尽显专业气质",
    price: 29,
    stock: 30,
    img: "/images/product05.png",
  },
  {
    id: "6",
    type: "鼠标垫",
    name: "文创字母鼠标垫「IT技术社区专属」",
    price: 79,
    stock: 60,
    img: "/images/product06.png",
  },
]);

const addToCart = (product) => {
  emitter.emit('add-to-cart', product);
};
</script>

<template>
  <el-container style="width: 80%; margin: 0 auto">
    <el-main>
      <el-row>
        <el-col :xs="12" :sm="8" v-for="(product, i) in productList" :key="i">
          <el-card shadow="hover" style="margin: 2%">
            <div style="display: flex; justify-content: center">
                <img :src="product.img" style="width: 90%; height: 50%" />
              </div>
              <p style="width: 90%">{{ product.name }}</p>
              <p style="display: flex; gap: 20%">
                <span>价格：￥{{ product.price }}</span>
                <span>库存：{{ product.stock }}件</span>
              </p>
            <el-button @click="addToCart(product)">加入购物车</el-button>
          </el-card>
        </el-col>
      </el-row>
    </el-main>

    <el-aside>
      <Cart />
    </el-aside>
  </el-container>
</template>
